﻿@page "/rich-text-editor/markdown-custom-format"

@using Syncfusion.Blazor.RichTextEditor
@using Markdig;

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates how to customize tags of markdown formatting. Type or edit the text and apply the format to view customized markdown syntax. For example, apply “+” to Unordered list. </p>
</SampleDescription>
<ActionDescription>
   <p> The Rich Text Editor allows you to customize the markdown syntax by overriding its default syntax. Configure the customized markdown syntax using the <code>RichTextEditorMarkdownOptions</code> tag directive</p>
</ActionDescription>

<div class="control-section">
    @if (!IsPreview)
    {
        <SfRichTextEditor Height="250px" EditorMode="EditorMode.Markdown" SaveInterval="1" @bind-Value="@MarkdownValue">
            <RichTextEditorToolbarSettings Items="@Tools">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="Preview">
                        <Template>
                            <button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="PreviewClick">
                                <span class="e-btn-icon e-md-preview e-icons"></span>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
            <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" FormatSyntax="@FormatSyntax" SelectionSyntax="@SelectionSyntax" />
            <RichTextEditorEvents ValueChange="@OnValueChange" />  
        </SfRichTextEditor>
    }
    else
    {
        <SfRichTextEditor Readonly="true" @bind-Value="@HtmlValue">
            <RichTextEditorToolbarSettings Items="@Items">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="code">
                        <Template>
                            <button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="CodeClick">
                                <span class="e-btn-icon e-preview e-icons"></span>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
        </SfRichTextEditor>
    }
</div>

@code{
    private bool IsPreview { get; set; }
    private string HtmlValue { get; set; }
    private MarkdownPipeline Pipeline { get; set; }

    private string MarkdownValue { get; set; } = @"The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";

    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>() {
        new ToolbarItemModel() { Name = "code", TooltipText = "Code View" },
    };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Name = "Preview", TooltipText = "Preview" },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };

    private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>(){
        { "OL", "2. " },
        { "UL", "+ " }
    };

    private Dictionary<string, string> FormatSyntax { get; set; } = new Dictionary<string, string>(){
        { "Blockquote", "> " }
    };

    private Dictionary<string, string> SelectionSyntax { get; set; } = new Dictionary<string, string>(){
        { "Bold", "__" },
        { "Italic", "_" },
    };

    protected override void OnInitialized()
    {
        Pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
        this.HtmlValue = Markdig.Markdown.ToHtml(MarkdownValue, Pipeline);
        base.OnInitialized();
    }

    private void OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        if (args.Value == null)
        {
            this.HtmlValue = null;
        }
        else
        {
            this.HtmlValue = Markdig.Markdown.ToHtml(args.Value, Pipeline);
        }
    }

    private void PreviewClick()
    {
        this.IsPreview = true;
    }

    private void CodeClick()
    {
        this.IsPreview = false;
    }
}

<style>
    .e-icon-btn .e-preview::before {
        content: '\e790';
    }

    .bootstrap4 .e-icon-btn .e-md-preview::before {
        content: '\e787';
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .tailwind .e-icon-btn .e-md-preview::before {
        content: '\e7d0';
    }

    .tailwind .e-icon-btn .e-preview::before {
        content: '\e748';
    }

    .bootstrap4 .e-icon-btn.e-active .e-view-side::before {
        content: '\e350';
    }

    .bootstrap4 .e-icon-btn .e-view-side::before {
        content: '\e350';
    }

    .e-icon-btn .e-active .e-view-side::before {
        content: '\e350';
    }

    .e-icon-btn .e-view-side::before {
        content: '\e350';
    }
</style>